<template>
  <div>
    <el-form-item label="弹框标题">
      <el-input v-model="localData.title" placeholder="请输入弹框标题" />
    </el-form-item>
    <el-form-item label="确认按钮配置">
      <custom-btn-setting text="配置" :options="formJson" :formModelDataFromDesign="formModelDataFromDesign" :value="localData.submitBtn" @submit="submit" />
    </el-form-item>
    <el-form-item label="取消按钮文字">
      <el-input v-model="localData.cancelText" placeholder="请输入取消按钮名称" />
    </el-form-item>
    <el-form-item label="模板按钮文字">
      <el-input v-model="localData.templateText" placeholder="请输入模板按钮名称" />
    </el-form-item>
    <el-form-item label="接口配置">
      <div class="setting-btns">
        <el-button type="primary" link @click="openUploadSetting">文件上传接口</el-button>
        <el-button type="primary" link @click="openDownloadSetting">模板下载接口</el-button>
      </div>
    </el-form-item>
    <el-form-item label="提示语">
      <el-input v-model="localData.tipText" placeholder="请输入提示语" />
    </el-form-item>
    <el-form-item label="支持多选">
      <el-switch v-model="localData.multiple" />
    </el-form-item>
    <el-form-item label="显示文件列表">
      <el-switch v-model="localData.showFileList" />
    </el-form-item>
    <el-form-item label="允许文件类型">
      <el-input v-model="localData.accept" placeholder="请输入允许接收的文件类型" />
    </el-form-item>
    <el-form-item label="最大上传数量">
      <el-input-number v-model="localData.limit" controls-position="right" placeholder="最大上传数量"/>
    </el-form-item>

    <drag-dialog title="上传接口设置" v-model="showUploadSetting" :close-on-click-modal="false">
      <custom-ajax-setting v-model="curEditUploadSetting" :options="formJson" />
      <template #footer>
        <dialog-footer @ok="uploadSettingSubmit" @cancel="uploadSettingCancel" />
      </template>
    </drag-dialog>

    <drag-dialog title="模板接口设置" v-model="showDownloadSetting" :close-on-click-modal="false">
      <custom-ajax-setting v-model="curEditDownloadSetting" :options="formJson" :typeOptions="remoteTypeOptions" />
      <template #footer>
        <dialog-footer @ok="downloadSettingSubmit" @cancel="downloadSettingCancel" />
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import customBtnSetting from '../customButton/customBtnSetting.vue';
import customAjaxSetting from '../../../components/customAjaxSetting.vue';
import btnConfig from '../customButton/customButtonAttr';
import { randomString } from '@/utils/zmids';
import { generateValidUuid } from '@code/components/anvil-code-low-common/utils/common-methods'
import { cloneDeep } from 'lodash-es';

export default {
  name: 'UploadDialogConfig',
  components: { customBtnSetting, customAjaxSetting },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formJson: {
      type: Object,
      default: () => {}
    },
    formModelDataFromDesign: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.localData = newVal;
        this.init();
      },
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  },
  data() {
    return {
      localData: {},
      showUploadSetting: false,
      curEditUploadSetting: {},
      showDownloadSetting: false,
      curEditDownloadSetting: {},
      remoteTypeOptions: [
        {
          label: '模型接口调用',
          value: 'ajaxModel'
        },
        {
          label: '本地接口调用',
          value: 'ajaxLocal'
        }
      ]
    };
  },
  methods: {
    submit(data) {
      this.localData.submitBtn = data;
    },
    openUploadSetting() {
      this.curEditUploadSetting = cloneDeep(this.localData.ajaxSetting) || {};
      this.showUploadSetting = true;
    },
    openDownloadSetting() {
      this.curEditDownloadSetting = cloneDeep(this.localData.downloadSetting) || {};
      this.showDownloadSetting = true;
    },
    uploadSettingSubmit() {
      this.localData.ajaxSetting = this.curEditUploadSetting;
      this.uploadSettingCancel();
    },
    uploadSettingCancel() {
      this.showUploadSetting = false;
    },
    downloadSettingSubmit() {
      this.localData.downloadSetting = this.curEditDownloadSetting;
      this.downloadSettingCancel();
    },
    downloadSettingCancel() {
      this.showDownloadSetting = false;
    },
    // 初始化按钮配置
    init() {
      if (this.localData && (!this.localData.submitBtn || !Object.keys(this.localData.submitBtn).length)) {
        const submitConfig = {
          ...cloneDeep(btnConfig),
          uuid: generateValidUuid(),
          buttonName: '确定'
        };
        this.localData.submitBtn = submitConfig;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.setting-btns {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 8px;
}
</style>